﻿@{
    //ViewBag.Title = "Trang chủ";
    //Layout = "~/Views/Shared/_HomeLayout.cshtml";
}

<div class="splash fade-in">
    <img src="/Images/logo.png" alt="" style="    margin-top: 59px;
    height: 70px;
    width: auto;
    float: right;
    margin-right: 7%;">
   @* <h1 class="splash-title fade-in">NHÀ HÀNG 1946</h1>*@
    
    <a href="#" class="splash-arrow fade-in"><img src="/Images/down-arrow.png" alt="" /></a>
</div><div class="wrapper">    <div id="bg"><img width="100%" height="100%" src="/Images/bg-home1.png" /></div>      <div class="home-content" style="margin:0; padding:0">        <h1  class="logo">
            <a href="@Url.ActionLocalized("Index", "home")" title="1946">
                <img src="/images/bg-bienhieu.png" alt="1946">
            </a>
        </h1>        <div class="banan">
            <img src="/images/bg-banan.png" alt="">      
        </div>            <div class="thucdon ">
            <a href="@Url.Action("Index","Menu")">
                <img id="menu-hover" class="hidden menu-hover " src="/images/menu-hover.png" alt="">
                <img id="menu" src="/images/menu.png" alt="">
                <div id="" class="letter-container menu-hover hidden">
                    <p>
                        <a href="@Url.Action("Index","Menu")">Thực đơn</a>
                    </p>
                </div>
                @* <img src="/images/mau-xanh.gif" alt="">*@
                @* <p class="menu-hover hidden"> Thực đơn</p>*@
            </a>
        </div>        <div class="slider" id="slider1" style="">
            <ul class="slider1">          
                <li >
                    <img src="/Images/1.png" />
                </li>
                <li >
                    <img src="/Images/2.png" />
                </li>
                <li >
                    <img src="/Images/3.png" />
                </li>  
            </ul>
        </div>           <div class="tranh-1">
            <a href="#">
                <img id="tranh-1-hover" class="hidden tranh-1-hover" src="/images/tranh-1-hover.png" alt="">
                <img id="tranh-1" src="/images/tranh-1.png" alt="">
                <div id="" class="letter-container tranh-1-hover hidden">
                    <p>
                        <a href="#">Sự kiện</a>
                    </p>
                </div>
            </a>
        </div>        <div class="slider" id="slider2" style=" ">
            <ul class="slider2">          
                <li >
                    <img src="/Images/1.png" />
                </li>
                <li >
                    <img src="/Images/2.png" />
                </li>
                <li >
                    <img src="/Images/3.png" />
                </li>  
            </ul>
        </div>        <div class="tranh-2">
            <a href="#">
                <img id="tranh-2-hover" class="hidden tranh-2-hover" src="/images/tranh-2-hover.png" alt="">
                <img id="tranh-2" src="/images/tranh-2.png" alt="">
            </a>
            <div id="" class="letter-container tranh-2-hover hidden">
                <p>
                    <a href="#">Khuyến mãi</a>
                </p>
            </div>
        </div>        <div class="slider" id="slider3" style="">
            <ul class="slider3">          
                <li >
                    <img src="/Images/1.png" />
                </li>
                <li >
                    <img src="/Images/2.png" />
                </li>
                <li >
                    <img src="/Images/3.png" />
                </li>  
            </ul>
        </div>        <div class="tranh-3">
            <a href="#">
                <img id="tranh-3-hover" class="hidden tranh-3-hover" src="/images/tranh-3-hover.png" alt="">
                <img id="tranh-3" src="/images/tranh-3.png" alt="">
            </a>
            <div id="" class="letter-container tranh-3-hover hidden">
                <p>
                    <a href="#">Tin tức</a>
                </p>
            </div>
        </div>        <div class="slider" id="slider4" style="">
            <ul class="slider4">          
                <li >
                    <img src="/Images/1.png" />
                </li>
                <li >
                    <img src="/Images/2.png" />
                </li>
                <li >
                    <img src="/Images/3.png" />
                </li>  
            </ul>
        </div>        <div class="cuaso">
            <img src="/images/bg-windown.png" alt="">              
        </div>        <div class="bandedo">
            <img src="/images/bg-bandedo.png" alt="">      
        </div>        <div class="dienthoai ">
            <a href="#">
                <img id="dienthoai-hover" class="hidden dienthoai-hover" src="/images/dienthoai-hover.png" alt="">
                <img id="dienthoai" src="/images/dienthoai.png" alt="">
                <div id="" class="letter-container dienthoai-hover hidden">
                    <p>
                        <a href="#">Liên hệ</a>
                    </p>
                </div>

            </a>
        </div>        <div class="slider" id="slider5" style="">
            <ul class="slider5">          
                <li >
                    <img src="/Images/1.png" />
                </li>
                <li >
                    <img src="/Images/2.png" />
                </li>
                <li >
                    <img src="/Images/3.png" />
                </li>  
            </ul>
        </div>        <div class="camera ">
            <a href="#">
                <img id="camera-hover" class="hidden camera-hover" src="/images/camera-hover.png" alt="">
                <img id="camera" src="/images/camera.png" alt="">
                <div id="" class="letter-container camera-hover hidden">
                    <p>
                        <a href="#">Thư viện</a>
                    </p>
                </div>

            </a>
        </div>        <div class="slider" id="slider6" style="">
            <ul class="slider6">          
                <li >
                    <img src="/Images/1.png" />
                </li>
                <li >
                    <img src="/Images/2.png" />
                </li>
                <li >
                    <img src="/Images/3.png" />
                </li>  
            </ul>
        </div>        <div class="modal-backdrop fade in hidden" id="backdrop" style="height:100%"></div>    </div></div><audio id="audio" autoplay >
<source src="/Images/ngaytetqueem.mp3" type="audio/ogg">
  <source src="/Images/ngaytetqueem.mp3" type="audio/mpeg"> 
 
     
Your browser does not support the audio element.
</audio>

<script type="text/javascript">
    $(function () {
        // kich hoat nhac tet tren mobile
        var audio = $("#audio").get(0);
        audio.load();
        audio.play();
    });
</script>@*<script>
    $(document).ready(function () {
        alert(screen.height);
    })
</script>*@
@*<div id="letter-container" class="letter-container">
    <h2>
        <a href="#">...and then there was serendipity</a>
    </h2>
</div>*@

<script type="text/javascript" src="~/Content/plugins/wraper/js/main.js"></script>
<script type="text/javascript">
    $(".thucdon").mouseenter(function () {
        hideAllSlide();

        if (!$(this).hasClass('itemfocus')) {
            $(this).addClass('itemfocus');
        }
        if ($(".menu-hover").hasClass('hidden')) {
            $(".menu-hover").removeClass('hidden');
        }
        $(function () {
            $(".menu-hover p a").lettering();
        });
        if (!$("#menu").hasClass('hidden')) {
            $("#menu").addClass('hidden');
        }
        if ($("#backdrop").hasClass('hidden')) {
            $("#backdrop").removeClass('hidden');
        }
    });
    $(".thucdon").mouseleave(function () {
        showSlide1();
        if ($(this).hasClass('itemfocus')) {
            $(this).removeClass('itemfocus');
        }
        if ($("#menu").hasClass('hidden')) {
            $("#menu").removeClass('hidden');
        }
        if (!$(".menu-hover").hasClass('hidden')) {
            $(".menu-hover").addClass('hidden');
        }
        if (!$("#backdrop").hasClass('hidden')) {
            $("#backdrop").addClass('hidden');
        }
    });
</script>
<script type="text/javascript">
    $(".tranh-1").mouseenter(function () {
        hideAllSlide();
        if (!$(this).hasClass('itemfocus')) {
            $(this).addClass('itemfocus');
        }
        if ($(".tranh-1-hover").hasClass('hidden')) {
            $(".tranh-1-hover").removeClass('hidden');
        }
        $(function () {
            $(".tranh-1-hover p a").lettering();
        });
        if (!$("#tranh-1").hasClass('hidden')) {
            $("#tranh-1").addClass('hidden');
        }
        if ($("#backdrop").hasClass('hidden')) {
            $("#backdrop").removeClass('hidden');
        }
    });
    $(".tranh-1").mouseleave(function () {
        showSlide1();
        if ($(this).hasClass('itemfocus')) {
            $(this).removeClass('itemfocus');
        }
        if ($("#tranh-1").hasClass('hidden')) {
            $("#tranh-1").removeClass('hidden');
        }
        if (!$(".tranh-1-hover").hasClass('hidden')) {
            $(".tranh-1-hover").addClass('hidden');
        }
        if (!$("#backdrop").hasClass('hidden')) {
            $("#backdrop").addClass('hidden');
        }
    });
</script>
<script type="text/javascript">
    $(".tranh-2").mouseenter(function () {
        hideAllSlide();
        if (!$(this).hasClass('itemfocus')) {
            $(this).addClass('itemfocus');
        }
        if ($(".tranh-2-hover").hasClass('hidden')) {
            $(".tranh-2-hover").removeClass('hidden');
        }
        $(function () {
            $(".tranh-2-hover p a").lettering();
        });
        if (!$("#tranh-2").hasClass('hidden')) {
            $("#tranh-2").addClass('hidden');
        }
        if ($("#backdrop").hasClass('hidden')) {
            $("#backdrop").removeClass('hidden');
        }
    });
    $(".tranh-2").mouseleave(function () {
        showSlide3();
        if ($(this).hasClass('itemfocus')) {
            $(this).removeClass('itemfocus');
        }
        if ($("#tranh-2").hasClass('hidden')) {
            $("#tranh-2").removeClass('hidden');
        }
        if (!$(".tranh-2-hover").hasClass('hidden')) {
            $(".tranh-2-hover").addClass('hidden');
        }
        if (!$("#backdrop").hasClass('hidden')) {
            $("#backdrop").addClass('hidden');
        }
    });
</script>
<script type="text/javascript">
    $(".tranh-3").mouseenter(function () {
        hideAllSlide();
        if (!$(this).hasClass('itemfocus')) {
            $(this).addClass('itemfocus');
        }
        if ($(".tranh-3-hover").hasClass('hidden')) {
            $(".tranh-3-hover").removeClass('hidden');
        }
        $(function () {
            $(".tranh-3-hover p a").lettering();
        });
        if (!$("#tranh-3").hasClass('hidden')) {
            $("#tranh-3").addClass('hidden');
        }
        if ($("#backdrop").hasClass('hidden')) {
            $("#backdrop").removeClass('hidden');
        }
    });
    $(".tranh-3").mouseleave(function () {
        showSlide4();
        if ($(this).hasClass('itemfocus')) {
            $(this).removeClass('itemfocus');
        }
        if ($("#tranh-3").hasClass('hidden')) {
            $("#tranh-3").removeClass('hidden');
        }
        if (!$(".tranh-3-hover").hasClass('hidden')) {
            $(".tranh-3-hover").addClass('hidden');
        }
        if (!$("#backdrop").hasClass('hidden')) {
            $("#backdrop").addClass('hidden');
        }
    });
</script>
<script type="text/javascript">
    $(".dienthoai").mouseenter(function () {
        hideAllSlide();
        if (!$(this).hasClass('itemfocus')) {
            $(this).addClass('itemfocus');
        }
        if ($(".dienthoai-hover").hasClass('hidden')) {
            $(".dienthoai-hover").removeClass('hidden');
        }
        $(function () {
            $(".dienthoai-hover p a").lettering();
        });
        if (!$("#dienthoai").hasClass('hidden')) {
            $("#dienthoai").addClass('hidden');
        }
        if ($("#backdrop").hasClass('hidden')) {
            $("#backdrop").removeClass('hidden');
        }
    });
    $(".dienthoai").mouseleave(function () {
        showSlide5();
        if ($(this).hasClass('itemfocus')) {
            $(this).removeClass('itemfocus');
        }
        if ($("#dienthoai").hasClass('hidden')) {
            $("#dienthoai").removeClass('hidden');
        }
        if (!$(".dienthoai-hover").hasClass('hidden')) {
            $(".dienthoai-hover").addClass('hidden');
        }
        if (!$("#backdrop").hasClass('hidden')) {
            $("#backdrop").addClass('hidden');
        }
    });
</script>
<script type="text/javascript">
    $(".camera").mouseenter(function () {
        hideAllSlide();
        if (!$(this).hasClass('itemfocus')) {
            $(this).addClass('itemfocus');
        }
        if ($(".camera-hover").hasClass('hidden')) {
            $(".camera-hover").removeClass('hidden');
        }
        $(function () {
            $(".camera-hover p a").lettering();
        });
        if (!$("#camera").hasClass('hidden')) {
            $("#camera").addClass('hidden');
        }
        if ($("#backdrop").hasClass('hidden')) {
            $("#backdrop").removeClass('hidden');
        }
    });
    $(".camera").mouseleave(function () {
        showSlide6();
        if ($(this).hasClass('itemfocus')) {
            $(this).removeClass('itemfocus');
        }
        if ($("#camera").hasClass('hidden')) {
            $("#camera").removeClass('hidden');
        }
        if (!$(".camera-hover").hasClass('hidden')) {
            $(".camera-hover").addClass('hidden');
        }
        if (!$("#backdrop").hasClass('hidden')) {
            $("#backdrop").addClass('hidden');
        }
    });
</script>
<style>
    .itemfocus {
        z-index: 9999999;

    }
    .bx-wrapper .bx-viewport {
        background: transparent;
    }

</style>
<script type="text/javascript">
    
</script>
<script>
    function hideAllSlide() {
        $(".slider1").hide();
        $(".slider2").hide();
        $(".slider3").hide();
        $(".slider4").hide();
        $(".slider5").hide();
        $(".slider6").hide();
    }
    function hideSlide1() {
        $(".slider1").hide();
        setTimeout(function () {
            showSlide1();
        }, 15000);
    }
    function showSlide1() {
        $(".slider1").show();
        setTimeout(function () {
            hideSlide1();
        }, 2000);
    }

    function hideSlide2() {
        $(".slider2").hide();
        setTimeout(function () {
            showSlide2();
        }, 15000);
    }
    function showSlide2() {
        $(".slider2").show();
        setTimeout(function () {
            hideSlide2();
        }, 2000);
    }

    function hideSlide3() {
        $(".slider3").hide();
        setTimeout(function () {
            showSlide3();
        }, 15000);
    }
    function showSlide3() {
        $(".slider3").show();
        setTimeout(function () {
            hideSlide3();
        }, 2000);
    }

    function hideSlide4() {
        $(".slider4").hide();
        setTimeout(function () {
            showSlide4();
        }, 15000);
    }
    function showSlide4() {
        $(".slider4").show();
        setTimeout(function () {
            hideSlide4();
        }, 2000);
    }

    function hideSlide5() {
        $(".slider5").hide();
        setTimeout(function () {
            showSlide5();
        }, 15000);
    }
    function showSlide5() {
        $(".slider5").show();
        setTimeout(function () {
            hideSlide5();
        }, 2000);
    }

    function hideSlide6() {
        $(".slider6").hide();
        setTimeout(function () {
            showSlide6();
        }, 15000);
    }
    function showSlide6() {
        $(".slider6").show();
        setTimeout(function () {
            hideSlide6();
        }, 2000);
    }

    $(document).ready(function () {
        $('.slider1').bxSlider({
            mode: 'fade',
            pagerCustom: '#',
            controls: false,
            auto: true,
            speed: 300,
            pause: 0
        });

        $('.slider2').bxSlider({
            mode: 'fade',
            pagerCustom: '#',
            controls: false,
            auto: true,
            speed: 300,
            pause: 0
        });
        $('.slider3').bxSlider({
            mode: 'fade',
            pagerCustom: '#',
            controls: false,
            auto: true,
            speed: 300,
            pause: 0
        });

        $('.slider4').bxSlider({
            mode: 'fade',
            pagerCustom: '#',
            controls: false,
            auto: true,
            speed: 300,
            pause: 0
        });

        $('.slider5').bxSlider({
            mode: 'fade',
            pagerCustom: '#',
            controls: false,
            auto: true,
            speed: 300,
            pause: 0
        });

        $('.slider6').bxSlider({
            mode: 'fade',
            pagerCustom: '#',
            controls: false,
            auto: true,
            speed: 300,
            pause: 0
        });

        hideAllSlide();
        showSlide1();
        setTimeout(function () {
            showSlide2();
        }, 3000);
        setTimeout(function () {
            showSlide3();
        }, 15000);
        setTimeout(function () {
            showSlide4();
        }, 9000);
        setTimeout(function () {
            showSlide5();
        }, 12000);
        setTimeout(function () {
            showSlide6();
        }, 6000);
    });

</script>
